<template>
	<div class="w-100">
		<p>工作台组件列表</p>
		<el-collapse v-model="activeName" accordion>
			<el-collapse-item v-for="collapse in componentList" :key="collapse.prop" :title="collapse.label" :name="collapse.prop">
				<ul class="nav-menu">
					<li
						v-for="(item, index) in collapse.children"
						:key="index"
						class="menu-item"
						:data-component="item.name"
						draggable="true"
						@dragstart="onDragstart"
					>
						{{ item.label }}
					</li>
				</ul>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts">
const activeName = ref('')
const componentList = [
	{
		label: '首页工作台',
		prop: 'home',
		children: [
			{ label: '头部Logo', name: 'HeaderTitle' },
			{ label: '当前时间', name: 'TimePage' },
			{ label: '数据统计', name: 'NoticeStatistics' },
			{ label: '快捷操作', name: 'ShortcutPage' },
			{ label: '人员统计', name: 'DataStatistics' },
			{ label: '通知公告', name: 'NoticeAnnounce' },
			{ label: '政策文件', name: 'PolicyDoc' },
			{ label: '数据库代办事项', name: 'DataCenterMess' },
			{ label: '动态报表', name: 'ReportPreview' },
			{ label: '机构运营管理本周菜谱', name: 'InsOpeMan_menu' },
			{ label: '机构运营统计', name: 'InsOpeMan_statistics' },
		],
	},
	{
		label: '机构运营补贴工作台',
		prop: 'operateSubsidy',
		children: [
			{ label: '头部Logo', name: 'HeaderTitle' },
			{ label: '当前时间', name: 'TimePage' },
			{ label: '快捷操作', name: 'shortcut' },
			{ label: '统计分析', name: 'operateSubsidyStatistics' },
			{ label: '通知公告', name: 'NoticeAnnounce' },
			{ label: '政策文件', name: 'subsidyPolicyDoc' },
			{ label: '代办事项', name: 'noticeTodo' },

			{ label: '各区内失能半失能老人情况', name: 'Table1' },
			{ label: '各区内从业人员分布情况', name: 'Table2' },
			{ label: '各区内不同岗位人员分布情况', name: 'Table3' },
			{ label: '各区内不同等级的养老机构分布情况', name: 'Table4' },
		],
	},
	{
		label: '一站办工作台',
		prop: 'oneStopOffice',
		children: [
		{ label: '一站办数据统计', name: 'OST_dataStatistics' },
		{ label: '一站办进行中', name: 'OST_ongoing' },
		],
	},
  {
		label: '社区居家养老服务监管',
		prop: 'homeCare',
		children: [
			{ label: '头部Logo', name: 'HeaderTitle' },
			{ label: '当前时间', name: 'TimePage' },
			{ label: '快捷操作', name: 'HomeCare_Shortcut' },
			{ label: '数据统计', name: 'HomeCare_DataStatistics' },
			{ label: '通知公告', name: 'HomeCare_NoticeStatistics' },
			{ label: '政策文件', name: 'subsidyPolicyDoc' },
			{ label: '推送记录', name: 'HomeCare_PushLog' },
		],
	},
]
const onDragstart = (ev) => {
	ev.dataTransfer.setData('component', ev.target.dataset.component)
}
</script>

<style scoped lang="scss">
.nav-menu {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
	.menu-item {
		border: 1px dotted #000;
		padding: 4px;
		width: 45%;
	}
}
</style>
